document.addEventListener('DOMContentLoaded', function() {
    const ticketForm = document.getElementById('ticketForm');
    const qqNumber = document.getElementById('qqNumber');
    const feedbackType = document.getElementById('feedbackType');
    const severityRating = document.querySelectorAll('input[name="severity"]');
    const description = document.getElementById('description');
    const screenshots = document.getElementById('screenshots');
    const previewContainer = document.getElementById('previewContainer');
    const submitBtn = document.getElementById('submitBtn');
    
    // 创建成功消息元素
    const successMessage = document.createElement('div');
    successMessage.className = 'success-message';
    successMessage.textContent = '工单提交成功！我们将尽快处理您的问题。';
    successMessage.style.cssText = `
        display: none;
        background-color: #2ecc71;
        color: white;
        padding: 15px;
        border-radius: 4px;
        margin-top: 20px;
        text-align: center;
    `;
    ticketForm.parentNode.appendChild(successMessage);

    // QQ号码验证
    qqNumber.addEventListener('input', function() {
        const qqError = document.getElementById('qqError');
        const qqRegex = /^[1-9][0-9]{4,10}$/;
        if (!qqRegex.test(this.value)) {
            qqError.textContent = '请输入有效的QQ号码（5-11位数字，不能以0开头）';
        } else {
            qqError.textContent = '';
        }
    });

    // 反馈类型验证
    feedbackType.addEventListener('change', function() {
        const typeError = document.getElementById('typeError');
        if (!this.value) {
            typeError.textContent = '请选择反馈类型';
        } else {
            typeError.textContent = '';
        }
    });

    // 问题严重程度验证
    severityRating.forEach(radio => {
        radio.addEventListener('change', function() {
            const severityError = document.getElementById('severityError');
            severityError.textContent = '';
        });
    });

    // 问题描述验证
    description.addEventListener('input', function() {
        const descriptionError = document.getElementById('descriptionError');
        if (this.value.trim().length === 0) {
            descriptionError.textContent = '请描述您遇到的问题';
        } else if (this.value.length > 2000) {
            descriptionError.textContent = '问题描述不能超过2000个字符';
        } else {
            descriptionError.textContent = '';
        }
    });

    // 图片上传预览 - 改进版本
    screenshots.addEventListener('change', function(e) {
        const fileError = document.getElementById('fileError');
        fileError.textContent = ''; // 重置错误信息
        
        const files = e.target.files;
        const validTypes = ['image/jpeg', 'image/png', 'image/bmp', 'image/webp'];
        const maxSize = 5 * 1024 * 1024; // 5MB
        const maxFiles = 5; // 最大上传数量
        const currentFiles = previewContainer.querySelectorAll('.previewImage').length;
        
        // 检查是否超过最大上传数量
        if (currentFiles + files.length > maxFiles) {
            fileError.textContent = `最多只能上传${maxFiles}张图片`;
            this.value = ''; // 清除选择
            return;
        }
        
        let hasError = false;
        const errorMessages = [];
        
        // 先检查所有文件是否有效
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            
            // 验证文件类型
            if (!validTypes.includes(file.type)) {
                errorMessages.push(`文件 ${file.name} 类型不支持，请上传JPG、PNG、BMP或WebP格式的图片`);
                hasError = true;
            }
            
            // 验证文件大小
            if (file.size > maxSize) {
                errorMessages.push(`文件 ${file.name} 超过5MB大小限制`);
                hasError = true;
            }
        }
        
        // 显示所有错误信息
        if (hasError) {
            fileError.innerHTML = errorMessages.join('<br>');
            this.value = ''; // 清除选择
            return;
        }
        
        // 处理有效的图片预览
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                // 创建图片容器，包含预览图和删除按钮
                const imgContainer = document.createElement('div');
                imgContainer.className = 'img-preview-container';
                
                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'previewImage';
                img.title = file.name; // 显示文件名
                
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'delete-img-btn';
                deleteBtn.innerHTML = '&times;'; // 叉号图标
                deleteBtn.title = '删除这张图片';
                
                // 删除图片事件
                deleteBtn.addEventListener('click', function() {
                    imgContainer.remove();
                    // 重新创建FileList（这是一个简化处理，实际项目可能需要更复杂的逻辑）
                    screenshots.value = '';
                });
                
                imgContainer.appendChild(img);
                imgContainer.appendChild(deleteBtn);
                previewContainer.appendChild(imgContainer);
            };
            
            reader.readAsDataURL(file);
        }
    });

    // 上传图片函数
function uploadImages(ticketId) {
    const imageCount = previewContainer.querySelectorAll('.previewImage').length;
    if (imageCount === 0) {
        // 没有图片需要上传，直接完成
        successMessage.textContent = '工单提交成功！我们将尽快处理您的问题。';
        successMessage.style.display = 'block';
        ticketForm.reset();
        previewContainer.innerHTML = '';
        setTimeout(() => {
            successMessage.style.display = 'none';
        }, 3000);
        return;
    }

    // 创建FormData对象
    const formData = new FormData();
    formData.append('ticket_id', ticketId);

    // 获取所有选中的文件
    // 注意：这里我们直接使用screenshots.files，因为在实际项目中
    // 应该在预览图片时就将文件对象存储起来，这里简化处理
    const files = screenshots.files;
    if (files && files.length > 0) {
        // 添加文件到FormData
        for (let i = 0; i < files.length; i++) {
            formData.append('screenshots[]', files[i]);
        }

        // 发送图片数据到后端 - 使用改进的上传方案
        fetch('upload_image_alt.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // 无论图片上传成功与否，都显示工单提交成功的消息
            // 实际应用中可能需要更复杂的错误处理
            successMessage.textContent = '工单提交成功！我们将尽快处理您的问题。';
            successMessage.style.display = 'block';
            ticketForm.reset();
            previewContainer.innerHTML = '';

            // 2秒后刷新页面
            setTimeout(() => {
                location.reload();
            }, 2000);
        })
        .catch(error => {
            // 图片上传失败，仍然显示工单提交成功，但记录错误
            console.error('图片上传失败: ', error);
            successMessage.textContent = '工单提交成功！我们将尽快处理您的问题。';
            successMessage.style.display = 'block';
            ticketForm.reset();
            previewContainer.innerHTML = '';

            // 3秒后隐藏成功消息
            setTimeout(() => {
                successMessage.style.display = 'none';
            }, 3000);
        });
    } else {
        // 没有文件，直接完成
        successMessage.textContent = '工单提交成功！我们将尽快处理您的问题。';
        successMessage.style.display = 'block';
        ticketForm.reset();
        previewContainer.innerHTML = '';
        setTimeout(() => {
            successMessage.style.display = 'none';
        }, 3000);
    }
}

// 表单提交处理
ticketForm.addEventListener('submit', function(e) {
    e.preventDefault();
    console.log('表单提交事件触发');
    let isValid = true;

    // 验证QQ号码
    let qqError = document.getElementById('qqError');
    const qqRegex = /^[1-9][0-9]{4,10}$/;
    if (!qqRegex.test(qqNumber.value)) {
        qqError.textContent = '请输入有效的QQ号码（5-11位数字，不能以0开头）';
        isValid = false;
    } else {
        qqError.textContent = '';
    }

    // 验证反馈类型
    let typeError = document.getElementById('typeError');
    if (!feedbackType.value) {
        typeError.textContent = '请选择反馈类型';
        isValid = false;
    } else {
        typeError.textContent = '';
    }

    // 验证问题严重程度
    let severityError = document.getElementById('severityError');
    let severitySelected = false;
    severityRating.forEach(radio => {
        if (radio.checked) {
            severitySelected = true;
        }
    });
    if (!severitySelected) {
        severityError.textContent = '请选择问题严重程度';
        isValid = false;
    } else {
        severityError.textContent = '';
    }

    // 验证问题描述
    let descriptionError = document.getElementById('descriptionError');
    if (description.value.trim().length === 0) {
        descriptionError.textContent = '请描述您遇到的问题';
        isValid = false;
    } else if (description.value.length > 2000) {
        descriptionError.textContent = '问题描述不能超过2000个字符';
        isValid = false;
    } else {
        descriptionError.textContent = '';
    }

    if (isValid) {
        // 防止重复提交
        submitBtn.disabled = true;
        submitBtn.textContent = '提交中...';

        // 创建FormData对象，不包含文件
        const formData = new FormData();
        formData.append('qqNumber', qqNumber.value);
        formData.append('feedbackType', feedbackType.value);
        severityRating.forEach(radio => {
            if (radio.checked) {
                formData.append('severity', radio.value);
            }
        });
        formData.append('description', description.value);

        // 发送表单数据到后端
        fetch('submit_ticket.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 基本信息提交成功，准备上传图片
                uploadImages(data.ticket_id);
            } else {
                // 显示错误消息
                submitBtn.disabled = false;
                submitBtn.textContent = '提交工单';
                alert(data.message);
            }
        })
        .catch(error => {
            // 恢复按钮状态
            submitBtn.disabled = false;
            submitBtn.textContent = '提交工单';
            alert('提交失败: ' + error.message);
        });
    }
});
});
